<template>
    <div class="header-swiper">
         <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    data(){
        return {
        swiperOptions:{
            pagination: {
                 el: '.swiper-pagination',
             },
            loop:true, 
            autoplay:true 
            },
        }
    },
    props:['swiperList']
}
</script>

<style scoped>
.header-swiper{
    background-color: #ccc;
    min-height: 100px;
    width: 100%;
    height: 100px;
}
.header-swiper img{
    width: 100%;
    height: 100px;
}

</style>